<template>
  <account-filter @onFilter="onFilter"/>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="email" label="Email" />
    <el-table-column prop="dob" label="Date Of Birth" />
    <el-table-column prop="createdAt" label="Created At" />
    <el-table-column prop="lastModifiedAt" label="Last Modified At" />
  </el-table>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from "vue";
import AccountApi from '../../apis/AccountApi'
import {AccountDetailProps, AccountFilterProps} from "@/types/account";
import AccountFilter from "@/views/account/AccountFilter.vue";

export default defineComponent({
  name: 'AccountView',
  components: {AccountFilter},
  setup() {
    let state = reactive<{tableData: AccountDetailProps[]}>({tableData: []})
    const onFilter = (arg: AccountFilterProps) => {
      console.log(arg);
    }
    onMounted(() => {
      AccountApi.getList({}).then(data => {
        state.tableData = data.records;
      })
    })
    return {
      onFilter,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped>

</style>